<template>

    <div class="artapp_div">
        <!-- 币种行情 -->
        <div>
            <!-- <div class="container">
                <div class="betweenSpread market_title">
                    <div class="leftSpread">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane :label="$t('home.mark')" name="1"></el-tab-pane>
                            <el-tab-pane :label="$t('home.coinMark')" name="0"></el-tab-pane>
                        </el-tabs>
                    </div>
                    <el-button @click="checkPair">{{$t('home.checkPair')}}</el-button>
                </div>
            </div> -->
            <Trade :activeName="activeName" />
        </div>
        <!-- <div class="baAX0PF9AVpM03C30LDa cc_cursor">
            <div class="AwsLHsacI5OhANTDV6ng cc_cursor">
                <div>
                    <h3>
                        <span></span>
                        <span class="FwHELYUlEt4CzFUy1fvm">
                            <br></span>
                    </h3>
                    <p></p>
                </div>
            </div>
            <div class="AwsLHsacI5OhANTDV6ng cc_cursor">
                <img src="../assets/logo_txt2.png">
                <div>
                    <h3>
                        <span>{{$t('home.huobi16')}}</span>
                    </h3>
                    <p>{{$t('home.huobi17')}}</p>
                </div>
            </div>
            <div class="EmuSQjkiZVeLkTJeuL5s cc_cursor">
                <div class="Cxes8pdRHI7ruiAetwwE cc_cursor"></div>
                <div class="PNiUYpJKQhmwdy_zgnIp cc_cursor"></div>
            </div>
            <div class="Fq5s6j9G6EvY5cj8RSmb cc_cursor">
                <div class="tIt8JSp9mhKKx6DNIMoE">
                    <div class="wHAHYYZIuJFFId7OlVRo cc_cursor">
                    </div>
                </div>
            </div>
        </div> -->










<div data-v-6a651f2c="" class="download-bg">
<!-- <img data-v-6a651f2c="" src="../assets/dl-bg-img2.png" alt="" style="width: 100%; height: 299px; position: absolute; bottom: 800px; z-index: 10;"> -->
        <div data-v-6a651f2c="" class="app-download-header">
            <div data-v-6a651f2c="" class="flex-center">
                <img data-v-6a651f2c="" src="../assets/dl-head-img2.png" alt="" style="width: 530px; height: 648px;">
                <div data-v-6a651f2c="" class="header-right">
                    <div data-v-6a651f2c="" class="flex-center">
                        <div data-v-6a651f2c="" style="font-size: 46px; font-weight: 600; line-height: 65px;">Bico Global</div>
                        <div data-v-6a651f2c="" class="header-right-icon">{{$t('bico.W305')}}</div>
                    </div>
                    <div data-v-6a651f2c="" style="font-size: 26px; line-height: 37px; margin-top: 12px;">{{$t('home.huobi17')}}</div>
                    <div data-v-6a651f2c="" class="flex-center" style="margin-top: 86px;">
                        <div data-v-6a651f2c="" style="width: 144px; height: 144px; padding: 8px; border-radius: 6px;">


                        <div class="d7J1PEEIJ6V3FZt441oB cc_cursor">
                        <div class="downloadBox">

                        <div class="container_app">
                            <div class="leftSpread verticalBox">
                                <div class="leftSpread vertical">
                                    <div class="downImg">
                                        <div id="iosDown"></div>
                                    </div>
                                </div>
                            </div>
                        </div>



                    </div>

                    </div>

                    </div>
                        <div data-v-6a651f2c="" style="margin-left: 36px; color: rgb(255, 255, 255);">
                            <div data-v-6a651f2c="" class="app-icon">
                                <img data-v-6a651f2c="" src="" alt="" style="width: 40px; height: 40px; margin-right: 16px;">
                                <span data-v-6a651f2c="" class="ex-fontSize20">Mac ios</span>
                            </div>
                            <div data-v-6a651f2c="" class="app-icon" style="margin-top: 32px;">
                                <img data-v-6a651f2c="" src="" alt="" style="width: 40px; height: 40px; margin-right: 16px;">
                                <span data-v-6a651f2c="" class="ex-fontSize20">Android</span>
                            </div>
                            <div data-v-6a651f2c="" class="app-icon" style="margin-top: 32px;">
                                <img data-v-6a651f2c="" src="" alt="" style="width: 40px; height: 40px; margin-right: 16px;">
                                <span data-v-6a651f2c="" class="ex-fontSize20">Windows</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div style="height:100px;"></div>
        <Foot/>
    </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import Trade from '@/components/trade'
import Foot from '@/components/Foot'
import { partenApi,bannerApi } from '@/api/getData'

export default {
    data(){
        return{
            bannerArr:[],//banner图
            isToken:sessionStorage.getItem('userToken'),
            lang:sessionStorage.getItem('language'),
            activeName:'1'
        }
    },
    created(){

    },
    mounted(){
        this.bannerFun();
        this.qrcodeFun()
    },
    methods:{
        handleClick(){

        },
        async qrcodeFun(){//获取下载app的地址
            var that = this;
            // appDown(function(res){
                // new QRCode('androidDown', {
                //     width: 100,
                //     height: 100,
                //     text:'https://h5.bickox.com/'
                // })

                new QRCode('iosDown', {
                    width: 100,
                    height: 100,
                    text:'https://t.me/usdtvps666'
                })
            // });
        },
        async bannerFun(){//banner图
            var that = this;
            var data = new URLSearchParams();
            data.set('showType','PC');
            var res = await bannerApi(data);
            that.bannerArr = [];
            if(res.code == 200){
                that.bannerArr = res.data;
            }
        },
        checkPair(){
            if(this.activeName == '1'){
                this.$router.push('/transaction')
            }else{
                this.$router.push('/legalTrastion')
            }
        },
        jumpRegister(){
            this.$router.push('/register')
        }
    },
    components:{
        Trade,Foot
    }
}
</script>
<style lang="less">
.artapp_div{
    //轮播图
    .block{
        a{
            display: inline-block;
            width: 100%;
            height: 100%;
            .imgFull{
                object-fit: cover;
            }
        }


    }



    .app-download-header[data-v-6a651f2c] {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        z-index: 10;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-top: 68px;
        width: 100%;
        height: 100%;
    }
    .flex-center[data-v-6a651f2c] {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .app-download-header .header-right-icon[data-v-6a651f2c] {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        margin: 0 0 10px 12px;
        padding: 0 11px;
        height: 33px;
        color: #ffffff;
        font-size: 18px;
        line-height: 25px;
        border-radius: 5px;
        background: linear-gradient(40deg, #0264ec 0%, #1b3cd8 100%);
    }
    .app-icon[data-v-6a651f2c] {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 32px;
        width: 196px;
        cursor: pointer;
        height: 56px;
        line-height: 56px;
        border-radius: 28px;
        background: linear-gradient(270deg, #1d39d6 0%, #0066ed 100%);
    }
    .app-download-header .header-right-icon[data-v-6a651f2c]::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 0;
        bottom: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 5px solid #0264ec;
    }

    .app-download-header .header-right[data-v-6a651f2c] {
        margin-left: 227px;
        color: #333333;
    }
    .flex-center[data-v-6a651f2c] {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .market{
        .container{
            h2{

                margin-right: 30px;
                font-weight: inherit;
            }
            .market_title{
                margin: 50px 0 20px 0;
                .el-tabs__header{
                    margin: 0;
                }
                .el-tabs__item{
                    font-size: 24px;
                    color: #8E8E8E!important;
                }
                .el-tabs__item.is-active{
                    font-size: 28px;
                    color: #333333!important;
                }
                .el-button--default{
                    background-color: transparent;
                    border: 1px solid @mainsColor;
                    span{
                        color: @mainsColor;
                    }
                }
            }
        }
    }
    .article {
        h2{
            margin: 40px 0;
            font-size: 28px;
            font-weight: inherit;
            text-align: center;
        }
        .article_box {
            ul{
                display: flex;
                flex-direction: row;
                li{
                    width: 33%;
                    margin-right: 28px;
                    text-align: center;
                    padding:0 22px;
                    &:nth-last-child(1){
                        margin: 0;
                    }
                    p{
                        font-size: 18px;
                        line-height: 40px;
                        border-bottom: 1px solid #3C3C3C;
                    }
                    span{
                        font-size: 12px;
                        color: #8E8E8E;
                    }
                    img{
                        width: 260px;
                    }
                }
            }
        }
    }
    .downloadBox{
            padding: 0px 0px;
            background-color: #ffffff00;
            margin: 0px 0;
        h2{
            text-shadow:0px 2px 3px rgba(170, 170, 170, .3);
            font-size: 28px;
            text-align: center;
        }
        .vertical{
            margin: 0px 0  0 0px;
            .downImg{
                    background-color: #ffffff;
                    padding: 12px;
                    margin-left: -7px;
                    width: 136px;
                    height: 136px;
                    cursor: pointer;
                    margin-top: -8px;
                    border-radius: 7px;
                    border: 1px solid #6e74985e;
                    transition:all 1s ease-out;
                    -webkit-transition: all 1s ease-out;
                    -moz-transition: all 1s ease-out;
                    -o-transition:all 1s ease-out;
                &:hover{
                    transform:scale(1.5);
                    -webkit-transform: scale(1.5);
                    -moz-transform:scale(1.5);
                    -o-transform:scale(1.5)
                }
            }
        }
        .verticalBox{
            width: 600px;
            margin: 0 auto;
        }
    }
    .partner{
        h2{
            margin: 40px 0;
            font-size: 28px;
            font-weight: inherit;
        }
        ul{
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            flex-direction: row;
            flex-wrap: wrap;
        }
        li{
            width: 33%;
            margin-bottom: 40px;
            a{
                width: 320px;
                text-align: center;
                display: inline-block;
                cursor: pointer;
                img{
                    border-radius: 2px;
                    height: 120px;
                }
                p{
                    color: #ffffff;
                }
            }
        }
    }

    .AwsLHsacI5OhANTDV6ng {
        margin-top: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .AwsLHsacI5OhANTDV6ng img {
        flex-shrink: 0;
        width: 150px;
        height: 150px;
        margin-right: 20px;
    }

    .baAX0PF9AVpM03C30LDa h3, .baAX0PF9AVpM03C30LDa p {
        margin: 0;
    }

    .AwsLHsacI5OhANTDV6ng .FwHELYUlEt4CzFUy1fvm {
        margin-left: 10px;
        color: #00f2e6;
        font-size: 16px;
        display: inline-block;
        line-height: 22px;
    }
    .EmuSQjkiZVeLkTJeuL5s {
        margin-top: 85px;
        display: flex;
        justify-content: center;
    }
    .Fq5s6j9G6EvY5cj8RSmb {
        margin-top: 70px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .EmuSQjkiZVeLkTJeuL5s .Cxes8pdRHI7ruiAetwwE, .EmuSQjkiZVeLkTJeuL5s .PNiUYpJKQhmwdy_zgnIp {
        width: 590px;
        height: 354px;
    }

    .Fq5s6j9G6EvY5cj8RSmb .Cq1YqusRLKYrWQJiKwQ0 .v9SxiJwyPbov5gEgQR5X {
        background: rgba(89,63,124,.4);
        margin-bottom: 14px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,.4);
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
    }
    .Fq5s6j9G6EvY5cj8RSmb .Cq1YqusRLKYrWQJiKwQ0 {
        width: 175px;
    }
    .Fq5s6j9G6EvY5cj8RSmb .tIt8JSp9mhKKx6DNIMoE {
        margin-right: 480px;
        text-align: center;
    }
    .Fq5s6j9G6EvY5cj8RSmb .wHAHYYZIuJFFId7OlVRo {
        display: flex;
        position: relative;
        height: auto;
        width: auto;
        margin-bottom: 40px;
    }
    .Fq5s6j9G6EvY5cj8RSmb .wHAHYYZIuJFFId7OlVRo .sFbzcQ2_Xq9R9QcyFoPE {
        width: auto;
        text-align: center;
        margin-right: 39px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .Fq5s6j9G6EvY5cj8RSmb .wHAHYYZIuJFFId7OlVRo .sFbzcQ2_Xq9R9QcyFoPE .jGWMomzT6X882Rp_uuZX {
        padding: 4px;
        width: 136px;
        height: 136px;
        background-color: #fff;
        border-radius: 7px;
        border: 1px solid #ccc;
    }
    .Fq5s6j9G6EvY5cj8RSmb .wHAHYYZIuJFFId7OlVRo .sFbzcQ2_Xq9R9QcyFoPE p {
        margin: 10px 0 0;
        font-size: 14px;
        color: #fff;
    }
    .Fq5s6j9G6EvY5cj8RSmb .wHAHYYZIuJFFId7OlVRo .sFbzcQ2_Xq9R9QcyFoPE .bYnECsZBchyuvGkpyJ9Y {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .Fq5s6j9G6EvY5cj8RSmb .MtwoBORcDhyzVKArt9Nk {
        color: #00f2e6;
        font-size: 15px;
        border-bottom: 1px solid #00f2e6;
    }
    a {
        color: #00d0c4;
        text-decoration: none;
        background-color: transparent;
        outline: none;
        cursor: pointer;
        transition: color .3s;
        -webkit-text-decoration-skip: objects;
    }
    .Fq5s6j9G6EvY5cj8RSmb .Cq1YqusRLKYrWQJiKwQ0 .v9SxiJwyPbov5gEgQR5X img {
        width: 25px;
        height: 25px;
        margin-right: 13px;
        margin-left: 17px;
    }
    img {
        vertical-align: middle;
        border-style: none;
    }
    .Fq5s6j9G6EvY5cj8RSmb .Cq1YqusRLKYrWQJiKwQ0 .v9SxiJwyPbov5gEgQR5X span {
        font-size: 16px;
        color: #fff;
    }

    .VNE7aXARdJZrZssT40Fd {
        display: flex;
        position: relative;
        height: auto;
        width: auto;
    }
    .VNE7aXARdJZrZssT40Fd .d7J1PEEIJ6V3FZt441oB {
        width: auto;
        text-align: center;
        margin-right: 39px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .VNE7aXARdJZrZssT40Fd .d7J1PEEIJ6V3FZt441oB .EQ0eFZN7VCdVZTfRBgi4 {
        padding: 4px;
        width: 136px;
        height: 136px;
        background-color: #fff;
        border-radius: 7px;
        border: 1px solid #ccc;
    }
    .VNE7aXARdJZrZssT40Fd .d7J1PEEIJ6V3FZt441oB {
        width: auto;
        text-align: center;
        margin-right: 39px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .S3U0HCSczyF8K3yF7OOD {
        display: flex;
        flex-wrap: wrap;
        width: 420px;
    }
    .S3U0HCSczyF8K3yF7OOD .cble46zAo5eUI6RlpKvf:nth-child(2n-1) {
        margin-right: 63px;
    }
    .S3U0HCSczyF8K3yF7OOD .cble46zAo5eUI6RlpKvf {
        background: rgba(89,63,124,.4);
        width: 175px;
        height: 45px;
        margin-bottom: 14px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,.4);
        display: flex;
        align-items: center;
    }
    .S3U0HCSczyF8K3yF7OOD .cble46zAo5eUI6RlpKvf img {
        width: 25px;
        height: 25px;
        margin-right: 13px;
        margin-left: 17px;
    }
    .S3U0HCSczyF8K3yF7OOD .cble46zAo5eUI6RlpKvf span {
        font-size: 16px;
        color: #fff;
    }
    .container_app {
        width: 100%;
    }
    img {
        vertical-align: middle;
        border-style: none;
        width: 136px;
        height: 136px;
    }



}
</style>
